@page
@{ Layout = "_LayoutHome"; }
@section Styles{
    <link href="/sitefiles/assets/css/bootstrap-4.1.0.min.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/css/xblms.min.css" rel="stylesheet" type="text/css" />
    <style>
        .ion-person:before,
        .ion-locked:before,
        .ion-image:before,
        .ion-ipad:before,
        .ion-chatbubble:before {
            width: 16px;
            font-size: 18px;
        }

        html {
            overflow: hidden;
        }

        .wrapper-page {
            max-width: 399px;
            margin: 58px auto;
        }
    </style>
}

<div class="wrapper-page">
    <div class="mb-5 text-center">
        <div class="h1 fw-bold">{{ DOCUMENTTITLECN }}</div>
    </div>
    <el-card style="box-shadow:0 0 16px 2px rgba(102,0,255,0.25);">
        <div slot="header" class="clearfix">
            <el-row style="display:flex;align-items:center;justify-content:space-between;">
                <el-col :span="16">
                    <div class="fw-bold">
                        用户中心-请登录
                    </div>
                </el-col>
                <el-col :span="8" style="text-align:right;">
                    <img :src="DEFAULT_LOGO_URL" width="66" />
                </el-col>
            </el-row>
        </div>

        <el-alert v-if="pageAlert" style="margin-bottom: 10px;" :closable="false" :type="pageAlert.type" v-html="pageAlert.title"></el-alert>

        <el-form v-on:submit.native.prevent ref="formAccount" :model="form" label-width="0" status-icon>
            <el-form-item prop="account" :rules="[{ required: true, message: '请输入用户名/手机号/邮箱' }]">
                <el-input ref="account" v-model="form.account" placeholder="请输入用户名/手机号/邮箱" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                    <template slot="prepend">
                        <i class="el-icon-user-solid"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码' }]">
                <el-input v-model="form.password" type="password" name="password" placeholder="请输入密码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                    <template slot="prepend">
                        <i class="el-icon-lock"></i>
                    </template>
                </el-input>
            </el-form-item>

            <el-form-item v-if="!isUserCaptchaDisabled" prop="captchaValue" :rules="[{ required: true, message: '请输入验证码' }]">
                <el-input v-model="form.captchaValue" placeholder="请输入验证码" autocomplete="off" v-on:keyup.enter.native="btnSubmitClick">
                    <template slot="prepend">
                        <i class="el-icon-picture"></i>
                    </template>
                    <template slot="append">
                        <a href="javascript:;" v-on:click="btnCaptchaClick">
                            <img v-show="captchaUrl" style="display: none; height: 30px;" :src="captchaUrl">
                        </a>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <div>
            <el-checkbox v-model="form.isPersistent" style="margin-right: 10px; margin-bottom: 5px;">
                下次自动登录
            </el-checkbox>
        </div>
        <div style="margin: 10px 0;">
            <div class="p-2 bg-light rounded-pill">
                <el-button type="primary" plain v-on:click="btnSubmitClick" class="w-100 py-3  rounded-pill">登 录<i class="bi bi-box-arrow-in-right ms-3"></i></el-button>
            </div>
        </div>
    </el-card>
    <div class="text-muted text-center" style="margin-top:18px;">
        <small>{{ DOCUMENTTITLE }}<span class="ms-2 text-warning">v{{ version }}</span></small>
    </div>
</div>

@section Scripts{
    <script src="/sitefiles/assets/lib/md5-2.10.0.min.js" type="text/javascript"></script>
    <script src="/sitefiles/assets/js/home/login.js" type="text/javascript"></script>
}